<template>
  <div class="app-container">
    <div class="navi">
      <el-input
        class="navi-input"
        placeholder="请输入查询的设备名称"
        v-model="queryParam.machineName"
        @keyup.enter.native="search"
        clearable>
      </el-input>
      <el-tooltip class="item" effect="dark" content="搜索" placement="right">
        <el-button class="search-btn" type="primary" plain icon="el-icon-search" @click="search"></el-button>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="新增机器信息" placement="bottom">
        <el-button class="create-button" type="warning" plain icon="el-icon-plus"
                   @click="toInstertWswMachine"></el-button>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="生成excel" placement="bottom">
        <el-button class="download-button" type="info" plain icon="el-icon-download"
                   @click="exportWswMachineList"></el-button>
      </el-tooltip>
    </div>
    <el-table
      ref="multipleTable"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange"
      :header-cell-style="{background:'#f0f9eb'}" style="width: 100%"
    >
      <el-table-column
        type="selection"
        align="center"
        width="45">
      </el-table-column>
      <el-table-column align="center" label="ID" width="55">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="设备编号" align="center" width="95">
        <template slot-scope="scope">
          {{ scope.row.machineId }}
        </template>
      </el-table-column>
      <el-table-column
        prop="machineName"
        label="设备名称"
        align="center"
        width="150">
      </el-table-column>
      <el-table-column
        prop="administrator"
        label="设备管理员"
        align="center"
        width="95">
      </el-table-column>
      <el-table-column
        prop="runningState"
        label="运行状态"
        align="center"
        width="80">
      </el-table-column>
      <el-table-column
        prop="storageLocation"
        label="存放位置"
        align="center">
      </el-table-column>
      <el-table-column label="是否需要检定" align="center" width="120">
        <template slot-scope="scope">
          {{ scope.row.testBool == 0 ? '不需要检定' : '需要检定' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="purchaseDate"
        label="购入日期"
        align="center"
        width="100">
      </el-table-column>
      <el-table-column
        prop="testDate"
        label="检定日期"
        align="center"
        width="100">
      </el-table-column>
      <el-table-column
        prop="termOfValidity"
        label="有效期至(15天内会显示红色)"
        align="center"
        width="150">
        <template slot-scope="scope">
          <div :style="{'color':scope.row.idRed?'red':'black'}">
            {{ scope.row.termOfValidity }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="inspectionEnterprise"
        label="送检单位"
        align="center">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
        width="180">
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="120">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="修改" placement="bottom">
            <el-button type="primary" plain icon="el-icon-edit" circle
                       @click="toUpdateWswMachine(scope.row.id)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
            <el-button type="danger" plain icon="el-icon-delete" circle @click="openDelTips(scope.row.id)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParam.pageNum"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="queryParam.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryParam.totalNum">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {getWswMachineList, removeWswMachine, exportWswMachineList} from '@/api/wsw-machine'
import {formatDate} from '@/utils/xinyu-utils'

export default {
  data() {
    return {
      multipleSelection: [],
      list: null,
      listLoading: true,
      queryParam: {
        pageNum: 1,
        pageSize: 10,
        totalNum: 0,
        machineName: '',
      },

    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getWswMachineList(this.queryParam).then(response => {
        this.list = response.data.records;
        this.queryParam.pageNum = response.data.current;
        this.queryParam.pageSize = response.data.size;
        this.queryParam.totalNum = response.data.total;
        this.listLoading = false;
      })
    },
    handleSizeChange(val) {
      this.queryParam.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      console.log(val)
      this.queryParam.pageNum = val;
      this.fetchData();
    },
    toUpdateWswMachine(id) {
      this.$router.push({
        path: '/updateMachine',
        query: {
          machineId: id
        }
      });
    },
    toInstertWswMachine() {
      this.$router.push({
        path: '/updateMachine'
      });
    },
    openDelTips(id) {
      console.log(id)
      let that = this;
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeWswMachine(id).then(response => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
        this.$refs.multipleTable.clearSelection();
        this.fetchData();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    search() {
      this.fetchData();
    },
    exportWswMachineList() {
      let ids = [];
      if (this.multipleSelection.length > 0) {
        for (let i = 0; i < this.multipleSelection.length; i++) {
          ids.push(this.multipleSelection[i].id);
        }
      }
      //请求下载，如果ids为空则下载全部;
      let url = process.env.VUE_APP_BASE_API + "/api/excel/exportWswMachineList?ids=" + ids;
      window.open(url, '_blank') // 新窗口打开外链接
      this.$notify({
        title: '成功',
        message: '下载成功！',
        type: 'success'
      });
    }
  }
}
</script>

<style scoped lang="scss">
.noData {
  margin: 40px auto;
  font-size: 18px;
  text-align: center;
  color: #DCDFE6;
}

.navi {
  width: 100%;
  margin: 0px 0px 8px 0px;

  .navi-input {
    width: 250px;
    margin-right: 2px;
  }

  .create-button, .download-button {
    float: right;
    margin-right: 2px;
  }

  .search-btn {
    width: 70px;
    height: 40px;
  }
}
</style>
